<style lang='scss' scoped>
  @import './index.scss';
</style>
<template>
  <section class='m-page'>
    <nav-left nav="/outborder2"/>

    <div class="sub-manager">

      <div class="sub-title">内框</div>
      <div class="add-btn" @click="openCustomConfrim">+ 添加</div>
      <!-- tab切换的头部 -->
      <div class="sub-tab-wrap">
        <div class="sub-tap-item" :class="{'sub-active': flag == 1}" @click="tab(1)">
          上架（{{mused.inframe[0]}}）
          <div class="line"></div>
        </div>

        <div class="sub-tap-item" :class="{'sub-active': flag == 2}" @click="tab(2)">
          下架（{{mused.inframe[1]}}）
          <div class="line"></div>
        </div>

        <div class="sub-tap-item" :class="{'sub-active': flag == 3}" @click="tab(3)">
          未设置（{{(userInfo.viptime.split(',')[1] - (mused.inframe[0] + mused.inframe[1]))}}）
          <div class="line"></div>
        </div>
      </div>
      <!-- tab切换的头部 -->

      <div class="s-search-block">
        <div class="s-search-box">
          <input v-model="searchText" type="text" placeholder="搜索 名称/ID" @keydown.enter="searchItem" ref="input" @focus="focus" @blur="blur">
          <div><yd-icon name="search" class="search-icon"></yd-icon></div>
        </div>
      </div>

      <!-- tab切换内容 -->
      <div class="sub-body" v-if="flag == 1">
        <scroller
          ref="pullrefreshDemo"
          :on-refresh="refresh"
          :on-infinite="infinite">
          <div class="sub-scoller">
            <x-materia-item v-for="(item,index) in onList" :key="index" :item="item" @click.native="showDetail(item)"/>
          </div>
        </scroller>
      </div>

      <div class="sub-body" v-else-if="flag == 2">
        <scroller
          ref="pullrefreshDemo2"
          :on-refresh="refresh2"
          :on-infinite="infinite2">
          <div class="sub-scoller">
            <x-materia-item v-for="(item,index) in downList" :key="index" :item="item"  @click.native="showDetail(item)" />
          </div>
        </scroller>
      </div>

      <div class="sub-body" v-else-if="flag == 3">
        <scroller
          ref="pullrefreshDemo3"
          :on-refresh="refresh3"
          :on-infinite="infinite3">
          <div class="sub-scoller">
            <x-materia-item-2 v-for="i in (userInfo.viptime.split(',')[1] - (mused.inframe[0] + mused.inframe[1]))" :key="i" @click.native="router(i)" />
          </div>
        </scroller>
      </div>
      <!-- tab切换内容 -->

    </div>


    <div class="cnt">
      <router-view></router-view>
    </div>

    <!-- 外框框条使用数量上限提示 -->
    <x-pop v-if="showPop">
      <div class="pop-box">
        <div class="pop-title">内框框条使用数量上限提示</div>
        <div class="pop-text">您的内框框条使用数量达到上限，请往购买更多内框框条服务</div>
        <div class="pop-bottom">
          <div class="pop-btn-left" @click="buyone">购买1个</div>
          <div class="pop-btn-right" @click="buymore">批量购买</div>
        </div>
      </div>
    </x-pop>

    <!-- 微信支付弹框 -->
    <x-pop-wrap v-if="show">
      <!-- 购买前 -->
      <div class="box" slot="box" v-if="0">
        <yd-icon name="error" class="close" color="#9B9B9B" size="15px" @click.native="show = false"></yd-icon>
        <div class="head">购买微代理员（10个）</div>
        <div class="qr-code"></div>
        <div class="price">¥950</div>
        <div class="type">使用微信扫码购买</div>
        <div class="bottom" style="bottom: 0;">若有付款问题，请联系我们 15325719985</div>
      </div>

      <!-- 购买成功 -->
      <div class="box" slot="box" v-else>
        <yd-icon name="error" class="close" color="#FE3824" size="15px" @click.native="show = false"></yd-icon>
        <div class="success"></div>
        <div class="success-text">支付成功</div>
        <div class="award">恭喜，已获得1个框条使用续费</div>
        <div class="bottom green-18" @click="closePop" style="bottom: 0;">完成</div>
      </div>
    </x-pop-wrap>
  </section>
</template>

<script>
  import {mapActions, mapState} from 'vuex'
  export default {
    data () {
      return {
        flag: 1,
        showPop: false,
        show: false,
        searchText: '',
        page: 1,
        pagesize: 100
      }
    },

    components: {},

    watch:{
      needRefreshInFrame(newValue){
        this.$store.state.material.inFrameList = []
        this.getList()
      }
    },

    computed: {
      ...mapState({
        inFrameList: state => state.material.inFrameList,
        userInfo: state => state.login.userInfo,
        mused: state => state.material.mused,
        needRefreshInFrame: state => state.needRefreshInFrame,
      }),
      onList(){
        return this.inFrameList.filter(item =>
        item.mstate === 'enable'
      )
      },
      downList(){
        return this.inFrameList.filter(item =>
        item.mstate === 'disable' || !item.mstate
      )
      },
    },

    mounted () {
      this.$store.state.material.inFrameList = []
      this.getList()

      if (this.$route.path === '/outborder/outline2') {
        this.flag = 1
      } else if (this.$route.path === '/outborder/outline2') {
        this.flag = 2
      } else if (this.$route.path === '/outborder/set') {
        this.flag = 3
      }
    },
    destroyed () {
    },

    methods: {
      ...mapActions([
        'getMaterialList'
      ]),
      getList(){
        let params = {
          action:'getmateriallist',
          mtype: 'inframe',
          page:this.page,
          pagesize: this.pagesize,
          search: this.searchText
        }
        this.getMaterialList(params)
      },
      tab (flag) {
        this.flag = flag
        if (flag == 1) {
          this.$router.replace('/outborder/outline2')
        } else if (flag == 2) {
          this.$router.replace('/outborder/outline2')
        } else if (flag == 3) {
          this.$router.replace('/outborder/set2')
        }
      },
      router (id) {
        // id 为列表的ID
        this.$router.replace({
          path: '/outborder/set2',
          query: {
            id
          }
        })
      },
      openCustomConfrim() {
        this.showPop = true
      },
      buyone () {
        this.show = true
      },
      buymore () {
        this.showPop = false
      },
      showDetail (item) {
        this.$router.replace({
          path: '/outborder/outline2',
          query: {
            info: item
          }
        })
      },
      closePop () {
        this.show = false
        this.$nextTick(() => {
          this.showPop = false
        })
        this.tab(3)
      },
      focus (e) {
        e.target.setAttribute('placeholder', '')
        e.target.style.textAlign = 'left'
      },
      blur (e) {
        e.target.setAttribute('placeholder', '搜索 名称/ID')
        if (!e.target.value) {
          e.target.style.textAlign = 'center'
        }
      },
      searchItem() {
        this.$store.state.material.inFrameList = []
        this.getList()
      },
      refresh () {
        setTimeout(() => {
          this.$refs.pullrefreshDemo.finishPullToRefresh()
        }, 1000)
      },
      infinite () {
        console.log(1)
        setTimeout(() => {
          this.$refs.pullrefreshDemo.finishInfinite(true)
        }, 1000)
      },
      refresh2 () {
        setTimeout(() => {
          this.$refs.pullrefreshDemo2.finishPullToRefresh()
        }, 1000)
      },
      infinite2 () {
        console.log(2)
        setTimeout(() => {
          this.$refs.pullrefreshDemo2.finishInfinite(true)
        }, 1000)
      },
      refresh3 () {
        setTimeout(() => {
          this.$refs.pullrefreshDemo3.finishPullToRefresh()
        }, 1000)
      },
      infinite3 () {
        console.log(2)
        setTimeout(() => {
          this.$refs.pullrefreshDemo3.finishInfinite(true)
        }, 1000)
      }
    }
  }

</script>
<style lang="scss">
  .x-select{
    width: 100%; height: 50px;
    margin-bottom: 30px;
  input{
    height: 50px;
    border-radius: 0!important;
    border-color: #c8c7cc!important;
  }
  .el-select-dropdown__item{
    height: 50px; line-height: 50px;
  }
  }
  .x-select.el-select .el-input.is-focus .el-input__inner {
    border-color: #c8c7cc;
  }

  .x-select.el-select .el-input__inner:focus{
    border-color: #c8c7cc;
  }
</style>
